<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>for-99</title>
    <style>
        html{
            /* 字体与空格等宽 */
            font-family: monospace;
        }
    </style>
</head>
<script>
    // 格式1
    document.write('格式1<br>')
    // i控制列
    for (var i=1; i<=9; i++) {
        // j控制行
        for (var j=1; j<=i; j++) {
            document.write(i+"*"+j+"="+i*j+(i*j<10?"&nbsp;&nbsp":"&nbsp"))
        }
        document.write("<br>")
    }
    document.write('<br>')

    // 格式2
    document.write('格式2<br>')
    for (var i=9; i>=1; i--) {
        for (var j=i; j>=1; j--) {
            document.write(i+"*"+j+"="+i*j+(i*j<10?"&nbsp;&nbsp":"&nbsp"))
        }
        document.write('<br>')
    }
    document.write("<br>")

    // 格式3
    document.write("格式3<br>")
    for (var i=1; i<=9; i++) {
        // k控制空白
        for (var k=1; k<=9-i; k++) {
            document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")
        }
        for (var j=1; j<=i; j++) {
            document.write(i+"*"+j+"="+i*j+(i*j<10?"&nbsp;&nbsp":"&nbsp"))
        }
        document.write("<br>")
    }
    document.write("<br>")

    // 格式4
    document.write("格式4<br>")
    for (var i=9; i>=1; i--) {
        for (var k=1; k<=9-i; k++) {
            document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp")
        }
        for (var j=i; j>=1; j--)  {
            document.write(i+"*"+j+"="+i*j+(i*j<10?"&nbsp;&nbsp":"&nbsp"))
        }
        document.write("<br>")
    }
</script>
<body>
    h<br>
    &nbsp;h
</body>
</html>